<template>
  <!-- 申请延期  -->
  <a-modal
    v-model:open="visible"
    title="申请延期"
    @ok="handleOk"
    class="addStation"
    destroyOnClose
    :width="520"
    @cancel="cancel"
    centered
  >
    <div class="tips">
      请输入{{ ticketRowData?.workTicketNumber }}工作票的延期时间
      （只能延期当日的时间，跨日请重新申请工作票）
    </div>
    <a-form
      :model="form"
      :rules="rules"
      layout="inline"
      :labelCol="labelCol"
      ref="formRef"
    >
      <a-form-item label="延期时间" name="delayTime">
        <a-time-range-picker
          v-model:value="form.delayTime"
          class="formInput"
          value-format="HH:mm"
          format="HH:mm"
          separator="~"
          showTime
          :allowClear="false"
        />
      </a-form-item>
      <a-form-item label="延期原因" name="delayRemark">
        <a-textarea
          v-model:value="form.delayRemark"
          class="formInput"
          placeholder="请输入"
          :rows="4"
        />
      </a-form-item>
    </a-form>
    <template #footer>
      <div class="footerBar">
        <a-button key="back" @click="cancel">取消</a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleSubmit"
          >确认</a-button
        >
      </div>
    </template>
  </a-modal>
</template>
<script setup>


import storage from "@/utils/storage";
const $api = inject("$api");
const props = defineProps({
  delayVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
  ticketRowData: {
    type: Object,
  },
});
const visible = ref(props.delayVisible);
const emits = defineEmits(["update:delayVisible", "getOrderList"]);
watch(
  () => props.delayVisible,
  async (val) => {
    visible.value = val;
    if (val) {
      form.value = {
        ...props.rowData,
      };
    }
  }
);
const labelCol = { style: { width: "100px" } };
const formRef = ref(null);
const form = ref({
  delayTime: null,
  delayRemark: null
});
const rules = ref({
  delayTime: [
    {
      required: true,
      message: "请输入",
      trigger: "change",
    },
  ],
  delayRemark: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
});
const cancel = () => {
  emits("update:delayVisible", false);
  formRef.value.clearValidate();
  form.value = {
    delayTime: null,
    delayRemark: null
  };
};
const loading = ref(false);
const handleSubmit = () => {
  formRef.value
    .validate()
    .then(async () => {
      const params = {
        id: props.ticketRowData.id,
        delayStartDate: form.value.delayTime[0],
        delayEndDate: form.value.delayTime[1],
        delayRemark: form.value.delayRemark
      }
      loading.value = true;
      
      const res = await $api.ticketDelay(params);
      loading.value = false;
      if (res && res.code === 0) {
        message.success("申请成功");
        cancel();
        emits("getOrderList");
      }
    })
    .catch((error) => {
      console.log("error", error);
    });
};
</script>

<style lang="less" scoped>
.form {
  padding: 0 40px;
  margin-top: 30px;
}
.formInput,
.formSelect {
  width: 350px;
}
.ant-form-item {
  margin-top: 20px;
}
.footerBar {
  text-align: center;
  margin-top: 30px;
}
.tips {
  margin-top: 20px;
}
</style>